﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <link href="../../Scripts/JQuery-zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="../../Scripts/JQuery-zTree/css/demo.css" rel="stylesheet" />
    <script src="../../Scripts/JQuery-zTree/js/jquery-1.4.4.min.js"></script>
    <script src="../../Scripts/JQuery-zTree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="../../Scripts/JQuery-zTree/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="../../Scripts/JQuery-zTree/js/jquery.ztree.exedit-3.5.js"></script>
    <script>
        var setting = {};

        //标准数据
        var zNodes = [
            {
                name: "父节点1 - 展开", open: true,
                children: [
                    {
                        name: "父节点11 - 折叠",
                        children: [
                            { name: "叶子节点111" },
                            { name: "叶子节点112" },
                            { name: "叶子节点113" },
                            { name: "叶子节点114" }
                        ]
                    },
                    {
                        name: "父节点12 - 折叠",
                        children: [
                            { name: "叶子节点121" },
                            { name: "叶子节点122" },
                            { name: "叶子节点123" },
                            { name: "叶子节点124" }
                        ]
                    },
                    { name: "父节点13 - 没有子节点", isParent: true }
                ]
            },
            {
                name: "父节点2 - 折叠",
                children: [
                    {
                        name: "父节点21 - 展开", open: true,
                        children: [
                            { name: "叶子节点211" },
                            { name: "叶子节点212" },
                            { name: "叶子节点213" },
                            { name: "叶子节点214" }
                        ]
                    },
                    {
                        name: "父节点22 - 折叠",
                        children: [
                            { name: "叶子节点221" },
                            { name: "叶子节点222" },
                            { name: "叶子节点223" },
                            { name: "叶子节点224" }
                        ]
                    },
                    {
                        name: "父节点23 - 折叠",
                        children: [
                            { name: "叶子节点231" },
                            { name: "叶子节点232" },
                            { name: "叶子节点233" },
                            { name: "叶子节点234" }
                        ]
                    }
                ]
            },
            { name: "父节点3 - 没有子节点", isParent: true }

        ];


        var setting3 = {
            key: {
                name: "name",
                title: "",
                url: ""
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            view: {
                showTitle: true
            }
        };





        //自定义图标
        var node3 = [
                { id: 1, pId: 0, name: "展开、折叠 自定义图标不同", open: true, iconOpen: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/1_open.png", iconClose: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/1_close.png" },
                { id: 11, pId: 1, name: "叶子节点1", icon: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/2.png" },
                { id: 12, pId: 1, name: "叶子节点2", icon: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/3.png" },
                { id: 13, pId: 1, name: "叶子节点3", icon: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/5.png" },
                { id: 2, pId: 0, name: "展开、折叠 自定义图标相同", open: true, icon: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/4.png" },
                { id: 21, pId: 2, name: "叶子节点1", icon: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/6.png" },
                { id: 22, pId: 2, name: "叶子节点2", icon: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/7.png" },
                { id: 23, pId: 2, name: "叶子节点3", icon: "scripts/JQuery-zTree/css/zTreeStyle/img/diy/8.png" },
                { id: 3, pId: 0, name: "不使用自定义图标", open: true },
                { id: 31, pId: 3, name: "叶子节点1" },
                { id: 32, pId: 3, name: "叶子节点2" },
                { id: 33, pId: 3, name: "叶子节点3" }

        ];



        /* 动态数据测试完毕*/

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $.fn.zTree.init($("#treeDemo3"), setting3, node3);

        });


    </script>
    <ul id="treeDemo" class="ztree"></ul>

    <ul id="treeDemo2" class="ztree"></ul>

    <ul id="treeDemo3" class="ztree"></ul>

</body>
</html>
